<template>
  <div>
    <div class="content">
      <template v-if="!isLogin">
        <div class="menus">
          <el-row :gutter="100">
            <el-col :span="12">
              <el-card
                shadow="hover"
                class="menu-item"
                :body-style="{padding: `50px 0 60px`}"
                @click.native="$router.push('/supplier/form')"
              >
                <i class="el-icon-edit" />登记信息
                <p>记录可供信息，更进一步联系</p>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card
                shadow="hover"
                class="menu-item"
                :body-style="{padding: `50px 0 60px`}"
                @click.native="gotoRegister"
              >
                <i class="el-icon-s-custom" />注册账号
                <p>注册后可开通妥钱包及店铺</p>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div class="info">
          <div class="title">相关说明</div>
          <p>
            <label class="red">登记信息：</label>
            填写相关供货信息，平台将根据信息联系您。
          </p>
          <p>
            <label class="red">注册账号：</label>
            注册妥了网账号及妥钱包，可在妥了网采购及收益等金融交易。注册后可申请开通妥了网店铺，进行供货销售。
          </p>
          <p>
            <label class="red">妥客服：</label>
            点击右上角导航栏“妥客服”，可联系平台客服了解入驻详情。
          </p>
          <p>
            <label class="red">登录：</label>
            若已有妥了网账户，请点击右上角导航栏“登录”。
          </p>
        </div>
      </template>

      <template v-else>
        <div class="menus">
          <el-row :gutter="100">
            <el-col :span="12">
              <el-card
                shadow="hover"
                class="menu-item"
                :body-style="{padding: `50px 20px`}"
                @click.native="gotoShop"
              >
                <i class="el-icon-s-shop" />
                {{shopStatusMap[shopStatus][0]}}
                <p>{{shopStatusMap[shopStatus][1]}}</p>
              </el-card>
            </el-col>
            <el-col :span="12">
              <el-card
                shadow="hover"
                class="menu-item"
                :body-style="{padding: `50px 20px`}"
                @click.native="gotoWallet"
              >
                <i class="el-icon-s-finance" />
                {{walletStatusMap[walletStatus][0]}}
                <p>{{walletStatusMap[walletStatus][1]}}</p>
              </el-card>
            </el-col>
          </el-row>
        </div>

        <div class="info">
          <div class="title">相关说明</div>
          <p><label class="red">店铺：</label></p>
          <p>1.账户登录状态中，可申请开通妥了网店铺，在妥了网中进行供货销售。</p>
          <p>2.提交申请信息，平台进行审核，审核失败可进行修改信息，重新提交申请。</p>
          <p>3.审核通过后，可登录妥了网（<a target="_blank" href="//www.tlwok.com">http://www.tlwok.com</a>）查看店铺并使用。</p>

          <p><label class="red">妥钱包：</label></p>
          <p>1.账户登录状态中，可申请开通妥钱包，在妥了网中进行收益、转账等金融交易</p>
          <p>2.提交申请信息，平台进行审核，审核失败可进行修改信息，重新提交申请。</p>
          <p>3.审核通过后，可登录妥了网（<a target="_blank" href="//www.tlwok.com">http://www.tlwok.com</a>）查看妥钱包并使用。</p>

          <p>
            <label class="red">联系客服：</label>
            点击右上角导航栏“妥客服”，可联系平台客服。
          </p>
          <p>
            <label class="red">退出：</label>
            若想退出此账户，请点击右上角导航栏“退出”。
          </p>
        </div>
      </template>

      <el-carousel height="400px">
        <el-carousel-item
          v-for="(item, index) in banner"
          :key="index"

        >
          <div class="banner" :style="{backgroundImage: `url(${item.url})`}"></div>
          <!-- <img :src="item.url" /> -->
        </el-carousel-item>
      </el-carousel>
    </div>

    <OpenWallet :visible.sync="visibleWalletOpen"></OpenWallet>

  </div>
</template>

<script>
import { queryByType } from '@/api/setting';
import { getDomain } from '@/api/common';
import { getShopAndWalletStatus } from '@/api/purchase/supplier';
import OpenWallet from '../../components/OpenWallet.vue';

import User from '@/store/user';

export default {
  name: 'supplier',

  components: {
    OpenWallet,
  },

  data () {
    return {
      banner: [],
      registerUrl: '',
      openWalletUrl: '',
      walletStatus: 0,
      shopStatus: 0,
      walletStatusMap: {
        0: ['开通妥钱包', ''],
        1: ['妥钱包认证中', '查看详情'],
        2: ['妥钱包认证失败', '修改申请并提交'],
        3: ['已开通妥钱包', '点击进入妥了网'],
      },
      shopStatusMap: {
        0: ['开通店铺', '点击开通'],
        1: ['店铺认证中', '查看详情'],
        2: ['店铺认证失败', '修改申请并提交'],
        3: ['店铺已开通', '点击进入妥了网'],
      },
      visibleWalletOpen: false,
    };
  },

  created () {
    this.getData();

    this.addEvent();
  },

  computed: {
    isLogin () {
      return User.isLogin;
    },
  },

  methods: {
    addEvent () {
      const fun = () => {
        console.log('this.visibleWalletOpen', this.visibleWalletOpen);
        if (!this.visibleWalletOpen) {
          this.getData();
        }
      };
      window.addEventListener('focus', fun);
      this.$once('hook:beforeDestroy', () => {
        window.removeEventListener('focus', fun);
      });
    },
    async getData () {
      const p = [];
      if (User.isLogin) {
        p.push(this.getStatus());
        p.push(queryByType(3).then(result => { this.banner = result; }));
      } else {
        p.push(queryByType(4).then(result => { this.banner = result; }));
        p.push(this.getRegisterUrl());
      }

      const loading = this.$loading();
      await Promise.all(p);
      loading.close();
    },

    async getStatus () {
      const status = await getShopAndWalletStatus();
      this.shopStatus = status.shopStatus;
      this.walletStatus = status.walletStatus;
      if (this.walletStatus === 0) {
        this.visibleWalletOpen = true;
      }
    },

    async gotoOpenWalletUrl () {
      const domain = await getDomain(2);
      window.open(`//${domain}/`);
    },

    async getRegisterUrl () {
      const passportDomain = await getDomain(10);
      const currentDomain = document.domain;
      // const currentDomain = 'pp-test.tlwok.com';
      // const passportDomain = 'passporttest.tlwok.com';
      const protocol = document.location.protocol;
      const returnUrl = `${protocol}//${currentDomain}/supplier/registerSuccess`;
      const casUrl = `${protocol}//${passportDomain}/cas?ReturnUrl=${encodeURIComponent(returnUrl)}`;
      this.registerUrl = `//${passportDomain}/register?ReturnUrl=${encodeURIComponent(casUrl)}`;
    },

    gotoRegister () {
      this.registerUrl && window.open(this.registerUrl);
    },

    async gotoShop () {
      const loading = this.$loading();
      const domain = await getDomain(3);
      window.open(`//${domain}`);
      loading.close();
    },

    async gotoWallet () {
      if (this.walletStatus === 4) {
        const domain = await getDomain(this.shopStatus === 4 ? 3 : 2);
        window.open(`//${domain}`);
      } else {
        const domain = await getDomain(2);
        window.open(`//${domain}/lianjinAccount/toseller`);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.notice {
  margin: 20px auto;
  max-width: 1440px;
  min-width: 1000px;
}
.content {
  width: 1000px;
  margin: 20px auto;
}

.menus {
  width: 800px;
  margin: 50px auto;
}

.menu-item {
  text-align: center;
  font-size: 28px;
  font-weight: 300;
  color: $--color-primary;
  border-color: $--color-primary;
  cursor: pointer;
  position: relative;
  p {
    font-size: 14px;
    color: #666;
    margin-top: 5px;
    width: 100%;
    position: absolute;
    left: 0;
    text-align: center;
  }
  i {
    margin-right: 10px;
  }
}

.info {
  margin: 10px 0 50px;
  .title {
    text-align: center;
    font-size: 15px;
    font-weight: 600;
  }
  p {
    font-size: 13px;
  }

  .red {
    color: #c91523;
  }
}
a {
  color: #409eff;
}

.banner {
  background-size: cover;
  background-position: center center;
  height: 100%;
}
</style>
